<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-descriptions-item__label {
            width: 100px;
        }

        .Sort {
            position: absolute;
            right: 5px;
            bottom: 5px;
            color: #67C23A;
        }
        .el-tabs--border-card{
            box-shadow:none;
        }
        input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="minWidth">
        <yl-page-header content="添加商品"></yl-page-header>
        <el-form :model="form" :rules="rules" ref="contract" inline-message="true" style="width: 100%">
            <div class="table_titel">
                <div class="titel">添加商品</div>
            </div>
            <el-descriptions :column="3" border size="small">
                <el-descriptions-item label="商品编码">
                    <el-form-item prop="Article_Code">
                        <el-input clearable v-model.trim="form.Article_Code" placeholder="请输入商品编码"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品名称">
                    <el-form-item prop="Article_Name">
                        <el-input clearable v-model.trim="form.Article_Name" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="品牌">
                    <el-form-item prop="Brand_SerialNumber">
                        <el-select clearable v-model.trim="form.Brand_SerialNumber" placeholder="请选择商品品牌" filterable
                            style="width: 100%">
                            <el-option v-for="(item,index) in brand" :key="index" :label="item.Brand_Name"
                                :value="item.Brand_SerialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品类别">
                    <el-form-item prop="Category_SerialNumber">
                        <el-select clearable v-model.trim="form.Category_SerialNumber" placeholder="请选择商品类别" filterable
                            style="width: 100%">
                            <el-option v-for="(item,index) in category" :key="index" :label="item.Category_Name"
                                :value="item.Category_SerialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品系列">
                    <el-form-item prop="Series_SerialNumber">
                        <el-select clearable v-model.trim="form.Series_SerialNumber" placeholder="请选择商品系列" filterable
                            style="width: 100%">
                            <el-option v-for="(item,index) in series" :key="index" :label="item.Series_Name"
                                :value="item.Series_SerialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="商品款型">
                    <el-form-item prop="Item_SerialNumber">
                        <el-select clearable v-model.trim="form.Item_SerialNumber" placeholder="请选择商品款型" filterable
                            style="width: 100%">
                            <el-option v-for="(item,index) in item" :key="index" :label="item.Item_Name"
                                :value="item.Item_SerialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <!-- <el-descriptions-item label="统一吊牌价">
                    <el-form-item prop="Unify_Unit_Price">
                        <el-radio-group v-model="form.Unify_Unit_Price">
                            <el-radio-button label="0">否</el-radio-button>
                            <el-radio-button label="1">是</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="吊牌价">
                    <el-form-item prop="Unit_Price">
                        <el-input-number v-model="form.Unit_Price" clearable :precision="2" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                </el-descriptions-item> -->
                <el-descriptions-item label="分类汇总">
                    <el-form-item prop="Picture_URL">
                        <el-cascader v-model="business_article_classify" placeholder="请选择分类汇总" filterable
                            :props="defaultProps" :options="classify" style="width: 100%"></el-cascader>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="京东价">
                    <el-form-item prop="JDCOM_Unit_Price">
                        <el-input-number v-model="form.JDCOM_Unit_Price" clearable :precision="2" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="京东链接">
                    <el-form-item prop="JDCOM_URL">
                        <el-input clearable v-model.trim="form.JDCOM_URL" placeholder="请输入京东链接"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="是否参与团购">
                    <el-form-item prop="Group">
                        <el-radio-group v-model="form.Group">
                            <el-radio-button label="否">否</el-radio-button>
                            <el-radio-button label="是">是</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="封面图">
                    <el-form-item prop="Picture_URL">
                        <yl-upload :base="BASE_IMG" v-model.trim="form.Picture_URL"></yl-upload>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <div class="table_titel">
                <div class="titel">商品规格</div>
                <div class="operation">
                    <el-button type="primary" size="small" @click="add_article_specifications">新增</el-button>
                    <el-button type="danger" size="small" @click="remove_article_specifications">删除</el-button>
                </div>
            </div>
            <el-descriptions style="margin-bottom: 10px;" id="config" :column="3" border size="small"
                v-for="(item,index) in form.Children.business_article_specifications" :key="index">
                <el-descriptions-item :label="index+1+'.规格名称'">
                    <el-form-item :prop="'Children.business_article_specifications.'+index+'.Specifications_Name'"
                        :rules="rules.Specifications_Name">
                        <el-input v-model.trim="item.Specifications_Name" placeholder="请输入规格名称"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="吊牌价">
                    <el-form-item :prop="'Children.business_article_specifications.'+index+'.Unit_Price'"
                        :rules="rules.Unit_Price">
                        <el-input-number :disabled="form.Unify_Unit_Price=='1'" v-model="item.Unit_Price" clearable :precision="2" :step="1" :min="0"></el-input-number>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="SKU数量">
                    <el-form-item :prop="'Children.business_article_specifications.'+index+'.SKU_Quantity'"
                        :rules="rules.SKU_Quantity">
                        <el-input v-model.trim="item.SKU_Quantity" placeholder="请输入SKU数量"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="SKU重量">
                    <el-form-item prop="Weight">
                        <el-input v-model.trim="item.Weight" placeholder="请输入重量"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="SKU单位">
                    <el-form-item prop="Weight_Unit">
                        <el-select clearable v-model.trim="item.Weight_Unit" placeholder="请选择SKU单位" filterable
                            style="width: 100%">
                            <el-option v-for="(item,index) in unit" :key="index" :label="item.Unit"
                                :value="item.Article_Unit_SerialNumber"></el-option>
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="SKU尺寸">
                    <el-form-item prop="Size">
                        <el-input clearable v-model.trim="item.Size" placeholder="请输入SKU尺寸"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="京东价">
                    <el-form-item prop="JDCOM_Unit_Price">
                        <el-input-number v-model="item.JDCOM_Unit_Price" clearable :precision="2" :step="0.01"
                            :min="0"></el-input-number>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="京东链接">
                    <el-form-item prop="JDCOM_URL">
                        <el-input clearable v-model.trim="item.JDCOM_URL" placeholder="请输入京东链接"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="小包装数量">
                    <el-form-item prop="Package_Quantity">
                        <el-input clearable v-model.trim="item.Package_Quantity" placeholder="请输入小包装数量"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="包装尺寸">
                    <el-form-item prop="SKU_Package_Size">
                        <el-input clearable v-model.trim="item.SKU_Package_Size" placeholder="请输入包装尺寸"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="大包装数量">
                    <el-form-item prop="Carton_Quantity">
                        <el-input clearable v-model.trim="item.Carton_Quantity" placeholder="请输入大包装数量"></el-input>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="规格图片">
                    <el-form-item prop="Picture_URL">
                        <yl-upload :base="BASE_IMG" v-model.trim="item.Picture_URL"></yl-upload>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <template v-if="form.Children.business_article_specifications.filter(i=>i.Specifications_Name).length > 0">
                <div class="table_titel">
                    <div class="titel">其它配置</div>
                </div>
                <el-tabs v-model="activeName" type="border-card">
                    <el-tab-pane v-for="(obj,index) in form.Children.business_article_specifications.filter(i=>i.Specifications_Name)" 
                        :key="index" :label="obj.Specifications_Name" :name="index">
                        <div class="table_titel">
                            <div class="titel"></div>
                            <div class="operation">
                                <el-button type="primary" size="small" @click="add_Other(obj)">新增</el-button>
                                <el-button type="danger" size="small" @click="remove_Other(obj)">删除</el-button>
                            </div>
                        </div>
                        <el-descriptions v-for="(item,id) in obj.Other" :key="id" style="margin-bottom: 10px;" :column="3" border size="small">
                            <el-descriptions-item label="供应商">
                                <el-form-item prop="Supplier_SerialNumber">
                                    <el-select clearable v-model.trim="item.Supplier_SerialNumber" placeholder="请选择供应商" filterable style="width: 100%">
                                        <el-option v-for="(item,index) in supplier.filter(i=>item.Supplier_SerialNumber==i.Supplier_SerialNumber||!obj.Other.some(j=>j.Supplier_SerialNumber == i.Supplier_SerialNumber))" :key="index" :label="item.Supplier_Name"
                                            :value="item.Supplier_SerialNumber"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="销售价格">
                                <el-form-item prop="Sales_Unit_Price">
                                    <el-input :disabled="!item.Supplier_SerialNumber" type="number" clearable v-model.trim="item.Sales_Unit_Price" placeholder="请输入销售价格"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="采购价格">
                                <el-form-item prop="Purchase_Unit_Price">
                                    <el-input :disabled="!item.Supplier_SerialNumber" type="number" clearable v-model.trim="item.Purchase_Unit_Price" placeholder="请输入采购价格"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="每日库存">
                                <el-form-item prop="Quantity">
                                    <el-input :disabled="!item.Supplier_SerialNumber" type="number" clearable v-model.trim="item.Quantity" placeholder="请输入每日库存"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="可适用积分">
                                <el-form-item prop="Pionts">
                                    <el-checkbox-group :disabled="!item.Supplier_SerialNumber" v-model="item.Pionts">
                                        <el-checkbox label="Cash">现金积分</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="抵扣类型">
                                <el-form-item prop="Deduction_Type">
                                    <el-radio-group :disabled="!item.Supplier_SerialNumber" v-model="item.Deduction_Type">
                                        <el-radio v-model="item.Deduction_Type" label="0">固定抵扣上限</el-radio>
                                        <el-radio v-model="item.Deduction_Type" label="1">订单消费百分比</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="抵扣比例">
                                <el-form-item prop="Deduction_Limit">
                                    <el-input :disabled="!item.Supplier_SerialNumber" type="number" clearable v-model.trim="item.Deduction_Limit" placeholder="请输入抵扣比例"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item label="参与活动">
                                <el-form-item prop="Deduction_Limit">
                                    
                                </el-form-item>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <!-- 规格图片 -->
            <!-- <div class="table_titel">
                <div class="titel">商品图片</div>
            </div>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane v-for="(obj,index) in [{Specifications_Name:'通用'},...form.Children.business_article_specifications].filter(i=>i.Specifications_Name)" 
                    :key="index" :label="obj.Specifications_Name" :name="index">
                </el-tab-pane>
            </el-tabs> -->
            <div class="table_titel">
                <div class="titel">商品主图</div>
                <div class="operation">
                    <el-button :type="isMainSort?'danger':'success'" size="small"
                        @click="isMainSort = !isMainSort">{{isMainSort?'保存':'调整顺序'}}</el-button>
                </div>
            </div>
            <div style="display: flex;">
                <upload-images :data="Main_Image"  :id="0"></upload-images>
                <div id="Main_Image" style="margin-left: 10px; width: 100%; display: flex; flex-wrap: wrap;">
                    <div class="preview" :style="{borderColor:isMainSort?'#67C23A':'#F5F5F5'}"
                        v-for="(item,index) in Main_Image.filter(i=>i.id==0)" :key="index">
                        <el-image :ref="'Main'+index" :preview-src-list="[item.Base64]"
                            class="el-upload-list__item-thumbnail" fit="contain" :src="item.Base64"
                            style="width: 148px; height: 148px;"></el-image>
                        <span v-show="!isMainSort" class="el-upload-list__item-actions">
                            <span @click="handleImgClick('Main'+index)" style="cursor: pointer;"><i
                                    class="el-icon-zoom-in"></i></span>
                            <span @click="RemoveImage('Main_Image',index)" style="cursor: pointer;"><i
                                    class="el-icon-delete"></i></span>
                        </span>
                        <i v-show="isMainSort" class="el-icon-rank Sort"></i>
                    </div>
                </div>
            </div>
            <div class="table_titel">
                <div class="titel">商品详情图</div>
                <div class="operation">
                    <el-button :type="isDetailSort?'danger':'success'" size="small"
                        @click="isDetailSort = !isDetailSort">{{isDetailSort?'保存':'调整顺序'}}</el-button>
                </div>
            </div>
            <div style="display: flex;">
                <upload-images :data="Detail_Image" :id="0"></upload-images>
                <div style="display: flex; width: 100%;">
                    <!-- 配置 -->
                    <div id="Detail_Image"
                        style="width: 300px; flex-shrink: 1; display: flex; flex-direction: column; align-items: center;">
                        <div class="preview" :style="{borderColor:isDetailSort?'#67C23A':'#F5F5F5'}"
                            v-for="(item,index) in Detail_Image.filter(i=>i.id==0)" :key="index">
                            <el-image :ref="'Detail'+index" :preview-src-list="[item.Base64]"
                                class="el-upload-list__item-thumbnail" fit="contain" :src="item.Base64"
                                style="width: 148px;height: 148px;"></el-image>
                            <span v-show="!isDetailSort" class="el-upload-list__item-actions">
                                <span @click="handleImgClick('Detail'+index)" style="cursor: pointer;"><i
                                        class="el-icon-zoom-in"></i></span>
                                <span @click="RemoveImage('Detail_Image',index)" style="cursor: pointer;"><i
                                        class="el-icon-delete"></i></span>
                            </span>
                            <i v-show="isDetailSort" class="el-icon-rank Sort"></i>
                        </div>
                    </div>
                    <!-- 预览 -->
                    <div style="width: 100%;display: flex; flex-direction: column; align-items: center;">
                        <h1 v-show="Detail_Image.filter(i=>i.id==0).length>0">详情图预览</h1>
                        <el-image v-for="(item,index) in Detail_Image.filter(i=>i.id==0)" :key="item" fit="contain" :src="item.Base64"
                            style="width: 100%; max-width: 600px;"></el-image>
                    </div>
                </div>
            </div>
            <div style="height: 90px;"></div>
            <el-form-item class="form-operation">
                <el-button @click="window.history.back()">返回</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm('contract')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../utils/Sortable.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>